﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />
	<title>RC - Designer</title>
	<link rel="stylesheet" type="text/css" href="css/layout.css" />
	<link rel="stylesheet" type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" href="css/application.css" />
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery-layout.js"></script>
	<script type="text/javascript" src="js/jquery-layout-accordions.js"></script>
    <script type="text/javascript" src="controller/indexController.js"></script>
</head>
<body>

<div class="ui-layout-north ui-widget-content" style="display: one;">
	<h1 id="website-title">RC - Track Designer</h1>
	<button id="ResetLayoutButton" style="position:absolute;top:5px;right:5px;">Reset Layout</button>
	<button id="ShowHideGridDividers" style="position:absolute;top:5px;right:120px;" onclick="toggleGrid();">Show/Hide Grid</button>
</div>

<div class="ui-layout-south" style="display: none;">
    <span id="StatusSpan"></span>
</div>

<div class="ui-layout-center" style="display: none;"> 
	<div id="AccordionTrackLayout" class="basic">
		<h3><a href="#">Track Layout</a></h3>
			<div id="TrackLayoutTableDiv">		
			
		</div>
		<h3><a href="#">Track Layout Output</a></h3>
			<div>	
				/* BEGIN TRACK LAYOUT DATA */
				/* END TRACK LAYOUT DATA */
			</div>
	</div>
</div>

<div class="ui-layout-west">
	<div id="AccordionTrackComponents" class="basic">
		<h3><a href="#">Standard</a></h3>
			<div>		
				<!-- Available A Pieces :BEGIN -->	    
				 <div class="AvailableTrackPieceContainer">
		               <img id="AvailablePieceA" class="AvailablePieceThumbnail AvailablePieceA0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
		               <button id="AddPieceATopLeft" class="AddPieceButton" onclick="addPieceA();">Add</button>
		               <button id="CancelAddPieceA" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
		               <button id="RotatePieceA" class="RotatePieceButton" onclick="rotatePieceA();">Rotate</button>
		           </div>                                       
		           <!-- Available A Pieces :END -->	
		               
				 <!-- Available B Pieces :BEGIN -->	    
				 <div class="AvailableTrackPieceContainer">
		               <img id="AvailablePieceB" class="AvailablePieceThumbnail AvailablePieceB0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
		               <button id="AddPieceBLeft" class="AddPieceButton" onclick="addPieceB();">Add</button>
		               <button id="CancelAddPieceB" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
		               <button id="RotatePieceB" class="RotatePieceButton" onclick="rotatePieceB();">Rotate</button>
		           </div>                                        
		           <!-- Available B Pieces :END -->	  
		           
				 <!-- Available C Pieces :BEGIN -->	    
				 <div class="AvailableTrackPieceContainer">
		               <img id="AvailablePieceC" class="AvailablePieceThumbnail AvailablePieceC0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
		               <button id="AddPieceCLeft" class="AddPieceButton" onclick="addPieceC();">Add</button>
		               <button id="CancelAddPieceC" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
		               <button id="RotatePieceC" class="RotatePieceButton" onclick="rotatePieceC();">Rotate</button>
		           </div>                                        
		           <!-- Available C Pieces :END -->	  
				 <!-- Available E Pieces :BEGIN -->	    
				 <div class="AvailableTrackPieceContainer">
		               <img id="AvailablePieceE" class="AvailablePieceThumbnail AvailablePieceE0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
		               <button id="AddPieceELeft" class="AddPieceButton" onclick="addPieceE();">Add</button>
		               <button id="CancelAddPieceE" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
		               <button id="RotatePieceE" class="RotatePieceButton" onclick="rotatePieceE();">Rotate</button>
		           </div>                                        
		           <!-- Available E Pieces :END -->	 
		           
				 <!-- Available F Pieces :BEGIN -->	    
				 <div class="AvailableTrackPieceContainer">
		               <img id="AvailablePieceF" class="AvailablePieceThumbnail AvailablePieceF0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
		               <button id="AddPieceFLeft" class="AddPieceButton" onclick="addPieceF();">Add</button>
		               <button id="CancelAddPieceF" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
		               <button id="RotatePieceF" class="RotatePieceButton" onclick="rotatePieceF();">Rotate</button>
		           </div>                                        
		           <!-- Available F Pieces :END -->	 		           

				 <!-- Available G Pieces :BEGIN -->	    
				 <div class="AvailableTrackPieceContainer">
		               <img id="AvailablePieceG" class="AvailablePieceThumbnail AvailablePieceG0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
		               <button id="AddPieceGLeft" class="AddPieceButton" onclick="addPieceG();">Add</button>
		               <button id="CancelAddPieceG" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
		               <button id="RotatePieceG" class="RotatePieceButton" onclick="rotatePieceG();">Rotate</button>
		           </div>                                        
		           <!-- Available G Pieces :END -->	 

				 <!-- Available H Pieces :BEGIN -->	    
				 <div class="AvailableTrackPieceContainer">
		               <img id="AvailablePieceH" class="AvailablePieceThumbnail AvailablePieceH0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
		               <button id="AddPieceHLeft" class="AddPieceButton" onclick="addPieceH();">Add</button>
		               <button id="CancelAddPieceH" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
		               <button id="RotatePieceH" class="RotatePieceButton" onclick="rotatePieceH();">Rotate</button>
		           </div>                                        
		           <!-- Available H Pieces :END -->	 
				 <!-- Available I Pieces :BEGIN -->	    
				 <div class="AvailableTrackPieceContainer">
		               <img id="AvailablePieceI" class="AvailablePieceThumbnail AvailablePieceI0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
		               <button id="AddPieceILeft" class="AddPieceButton" onclick="addPieceI();">Add</button>
		               <button id="CancelAddPieceI" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
		               <button id="RotatePieceI" class="RotatePieceButton" onclick="rotatePieceI();">Rotate</button>
		           </div>                                        
		           <!-- Available I Pieces :END -->	 	
			</div>

			<h3><a href="#">Oversized</a></h3>
			<div>
			    <!-- Available D Pieces :BEGIN -->	    
			    <div class="AvailableTrackPieceContainerLarge">
                    <img id="AvailablePieceD" class="AvailablePieceThumbnailLarge AvailablePieceD0" alt="Available Piece" src="images/transparent.gif" width="1" height="1" />
                    <button id="AddPieceD" class="AddPieceButton" onclick="addPieceD();">Add</button>
		          <button id="CancelAddPieceD" class="CancelAddPieceButton" onclick="cancelAddPiece();" style="display:none;">Cancel</button>
	               <button id="RotatePieceD" class="RotatePieceButton" onclick="rotatePieceD();">Rotate</button>
                </div>                              
                <!-- Available D Pieces :END -->	
			</div>			
	</div>
</div>

<div class="ui-layout-east" style="display: none;">
</div>

<div id="SetTrackDimensionsDialogForm" title="Set track dimensions">
	<p>Specify measurements in feet.</p>
	<fieldset>
		<label for="TrackLengthInput">Length</label>
		<input type="text" name="TrackLengthInput" id="TrackLengthInput" />&nbsp;(ft.)
		<br />
		<label for="TrackWidthInput">Depth</label>
		<input type="text" name="TrackWidthInput" id="TrackWidthInput" value="" />&nbsp;(ft.)
	</fieldset>
</div>

<div id="HelpDialog" title="RC - Track Designer Help">
	<p>RC - Track Designer is an application that allows you to build different track layouts.</p>
</div>

<div id="ConfrimActionDialog" title="Confirm">
	<div id="ConfirmDialogContent"></div>
</div>

<div id="SetPieceLocationDialogForm" title="Specify the location">
	<p>Specify the block to place this piece into based on the lable displayed on the grid</p>
	<fieldset>
		<label for="TrackLengthInput">Length</label>
		<input type="text" name="TrackLengthInput" id="Text1" />&nbsp;(ft.)
		<br />
		<label for="TrackWidthInput">Depth</label>
		<input type="text" name="TrackWidthInput" id="Text2" value="" />&nbsp;(ft.)
	</fieldset>
</div>
</body>
</html> 
